<template>
  <div class="wrap">
    <div class="location">
      <!-- 图片加载 -->
      <img src="../assets/logo.png" alt />
      <!-- 登录表单验证 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input class="input" v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input class="inp" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
            <el-button @click=" resetForm(ruleForm)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../components/API/Api";
export default {
  data() {
    return {
      // 定义用户名密码
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    submitForm(ruleForm) {
      // 验证
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 获取登录用户密码
          API.submitForm(this.ruleForm).then(res => {
            console.log(res);
            if (res.meta.status == 200) {
              this.$store.commit("submitForm", res.data);
              console.log(res.data);
              this.$message.success(res.meta.msg);
              this.$router.push("/index");
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  computed: {},
  components: {},
  watch: {},
  getters: {}
};
</script>

<style  scoped>
.wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgb(110, 16, 82);
}
.location {
  width: 600px;
  background: #fff;
  height: 400px;
  margin: 300px auto;
  text-align: center;
  border-radius: 20px;
}
img {
  height: 200px;
  width: 200px;
  background: #fff;
  border-radius: 50%;
  margin-top: -100px;
  box-shadow: 0px 0px 100px rgb(243, 246, 237);
}
.inp {
  width: 450px;
}
.form {
  margin-top: 40px;
}
.btn {
  text-align: center;
  margin-right: 80px;
}
</style>